<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			li {list-style: none;}
			a {text-decoration: none;}
			input{outline: none;}
			@font-face {
	          font-family: 'iconfont';
	           src: url('font/iconfont.eot');
	           src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
				    url('font/iconfont.woff2') format('woff2'),
				    url('font/iconfont.woff') format('woff'),
				    url('font/iconfont.ttf') format('truetype'),
				    url('font/iconfont.svg#iconfont') format('svg');}
            .iconfont {
				  font-family: "iconfont" !important;
				  font-size: 30px;
				  font-style: normal;
				  -webkit-font-smoothing: antialiased;
				  -moz-osx-font-smoothing: grayscale;
				  color: white;}
		     @font-face {
			  font-family: 'iconfont';
			  src: url('font2/iconfont.eot');
			  src: url('font2/iconfont.eot?#iefix') format('embedded-opentype'),
			      url('font2/iconfont.woff2') format('woff2'),
			      url('font2/iconfont.woff') format('woff'),
			      url('font2/iconfont.ttf') format('truetype'),
			      url('font2/iconfont.svg#iconfont') format('svg');}
			.iconfont {
				  font-family: "iconfont" !important;
				  font-size:22px;
				  font-style: normal;
				  -webkit-font-smoothing: antialiased;
				  -moz-osx-font-smoothing: grayscale;
				  color: white;}
		@media only screen and (min-width:0px) and (max-width:500px){
			.top{position: fixed;top:0;background:#5c5042;width: 100%;height:50px;}
			.top ul{width: 100%;height:50px;display: flex;justify-content: space-around;align-items: center;}
			.top ul li:nth-child(3){display: none;}
			.banner{height: 250px;width: 100%;background:url(imgs/top-bg.png) no-repeat center top;background-size: cover;}
			.icon2{font-size: 22px;}
    		.tell{display: none;}
			.banner2{display: none;}
			.main{width: 100%;background: #f1f1f1;padding-top:10px;}
			.main li{width:300px;padding: 10px;margin: 0px auto;background: white;box-sizing: border-box;margin-bottom: 10px;}
			.main li img{width: 100%;}
			.main li p{width: 100%;border-bottom: 1px solid #f2f2f2;padding:8px 5px;}
			.main li p a{font-size: 12px;color:#444;display: block;line-height: 18px;height: 18px;}
			.data{height:24px;line-height: 33px;padding:0 6px;}
			.data .time{float:left;font-size:10px;color:#9e9e9e;}
			.data .logo{float:right;}
			.data .logo img{width:24px;height:12px;}			
			}
			
		@media only screen and (min-width:501px) and (max-width:768px) {
			.top{position: fixed;top:0;background:#5c5042;width: 100%;height:50px;}
			.top ul{width: 100%;height:50px;display: flex;justify-content: space-around;align-items: center;}
			.top ul li:nth-child(3){display: none;}
			.banner{height: 250px;width: 100%;background:url(imgs/top-bg.png) no-repeat center top;background-size: cover;}
    		.icon2{font-size: 22px;}
			.tell{width:100%;background: #f1f1f1;height:50px;display: block;}
			.tell ul{display: flex;justify-content: space-around;align-items: center;color:#898989;font-size:10px;}
			.tell ul li{text-align: center;height:50px;line-height: 50px;}
			.banner2{display:flex;width:620px;height:280px;flex-wrap:wrap;justify-content:space-between;align-items:center;margin: 0 auto;}
			.banner2 .img1{width:620px;height:250px;display: block;}
			.banner2 .img2{width:300px;height:250px;display:none;}
			.banner2 .img3{width:300px;height:250px;display:none;}
			.main{width: 100%;background: #f1f1f1;padding-top:10px;}
			.main li{width:300px;padding: 10px;margin: 0px auto;background: white;box-sizing: border-box;margin-bottom: 10px;}
			.main li img{width: 100%;}
			.main li p{width: 100%;border-bottom: 1px solid #f2f2f2;padding:8px 5px;}
			.main li p a{font-size: 12px;color:#444;display: block;line-height: 18px;height: 18px;}
			.data{height:24px;line-height: 33px;padding:0 6px;}
			.data .time{float:left;font-size:10px;color:#9e9e9e;}
			.data .logo{float:right;}
			.data .logo img{width:24px;height:12px;}
			}
			
		@media only screen and (min-width:769px) and (max-width:1024px) {
				.top{position: fixed;top:0;background:#5c5042;width: 100%;height:50px;}
				.top ul{width: 100%;height:50px;display: flex;justify-content: space-around;align-items: center;}
				.top ul li:nth-child(3){display:block;}
				.top ul li:nth-child(3) a{color: white;margin-right:30px;}
				.top ul li:nth-child(1){display:none;}
				.banner{height: 250px;
    					width: 100%;
    					background:url(imgs/top-bg.png) no-repeat center top;
    					background-size: cover;
    					}
    		
			.icon2{font-size: 22px;}
			.tell{width:100%;background: #f1f1f1;height:50px;display: block;}
			.tell ul{display: flex;justify-content: space-around;align-items: center;color:#898989;font-size:10px;}
			.tell ul li{text-align: center;height:50px;line-height: 50px;}
			.banner2{display:flex;width:620px;height:600px;flex-wrap:wrap;justify-content:space-between;align-content: center;margin: 0 auto;}
			.banner2 .img1{width:620px;height:250px;display: block;padding-bottom: 20px;}
			.banner2 .img2{width:300px;height:250px;display: block;}
			.banner2 .img3{width:300px;height:250px;display: block;}
			.main{width: 100%;background: #f1f1f1;padding-top:10px;}
			.main ul{display: flex;flex-wrap: wrap;width: 664px;margin: 0 auto;justify-content: space-between;}
			.main li{width:300px;padding: 10px;background: white;box-sizing: border-box;margin-bottom: 10px;}
			/*.main li:nth-child(2n-1){margin-right: 20px;}*/
			.main li img{width: 100%;}
			.main li p{width: 100%;border-bottom: 1px solid #f2f2f2;padding:8px 5px;}
			.main li p a{font-size: 12px;color:#444;display: block;line-height: 18px;height: 18px;}
			.data{height:24px;line-height: 33px;padding:0 6px;}
			.data .time{float:left;font-size:10px;color:#9e9e9e;}
			.data .logo{float:right;}
			.data .logo img{width:24px;height:12px;}@media only screen and (min-width:1025px) and (max-width:1260px)
			}
			
			
		@media only screen and (min-width:1025px) and (max-width:1260px) {
			.top{position: fixed;top:0;background:#5c5042;width: 100%;height:50px;}
			.top ul{width: 100%;height:50px;display: flex;justify-content: space-around;align-items: center;}
			.top ul li:nth-child(3){display:block;}
			.top ul li:nth-child(3) a{color: white;margin-right:30px;}
			.top ul li:nth-child(1){display:none;}
			.banner{height: 250px;width: 100%;background:url(imgs/top-bg.png) no-repeat center top;background-size: cover;}
			.icon2{font-size: 22px;}
			.tell{width:100%;background: #f1f1f1;height:50px;display: block;}
			.tell ul{display: flex;justify-content: space-around;align-items: center;color:#898989;font-size:10px;}
			.tell ul li{text-align: center;height:50px;line-height: 50px;}
			.banner2{display:flex;width:620px;height:600px;flex-wrap:wrap;justify-content:space-between;align-content: center;margin: 0 auto;}
			.banner2 .img1{width:620px;height:250px;display: block;padding-bottom: 20px;}
			.banner2 .img2{width:300px;height:250px;display: block;}
			.banner2 .img3{width:300px;height:250px;display: block;}
			.main{width: 100%;background: #f1f1f1;padding-top:10px;}
			.main ul{display: flex;flex-wrap: wrap;width: 964px;margin: 0 auto;justify-content: space-between;}
			.main li{width:300px;padding: 10px;background: white;box-sizing: border-box;margin-bottom: 10px;}
			/*.main li:nth-child(2n-1){margin-right: 20px;}*/
			.main li img{width: 100%;}
			.main li p{width: 100%;border-bottom: 1px solid #f2f2f2;padding:8px 5px;}
			.main li p a{font-size: 12px;color:#444;display: block;line-height: 18px;height: 18px;}
			.data{height:24px;line-height: 33px;padding:0 6px;}
			.data .time{float:left;font-size:10px;color:#9e9e9e;}
			.data .logo{float:right;}
			.data .logo img{width:24px;height:12px;}
			}
			
		@media only screen and (min-width:1261px) {	
			.top{position: fixed;top:0;background:#5c5042;width: 100%;height:50px;}
			.top ul{width: 100%;height:50px;display: flex;justify-content: space-around;align-items: center;}
			.top ul li:nth-child(3){display:block;}
			.top ul li:nth-child(3) a{color: white;margin-right:30px;}
			.top ul li:nth-child(1){display:none;}
			.banner{height: 250px;width: 100%;background:url(imgs/top-bg.png) no-repeat center top;background-size: cover;}
    		.icon2{font-size: 22px;}
			.tell{width:100%;background: #f1f1f1;height:50px;display: block;}
			.tell ul{display: flex;justify-content: space-around;align-items: center;color:#898989;font-size:10px;}
			.tell ul li{text-align: center;height:50px;line-height: 50px;}
			.banner2{display:flex;width:100%;height:300px;justify-content:center;align-items:center;margin: 0 auto;text-align: center;}
			.banner2 .img1{width:620px;height:250px;display: block;padding:0 10px 0 20px;}
			.banner2 .img2{width:300px;height:250px;display: block;}
			.banner2 .img3{width:300px;height:250px;display: block;padding:0 20px 0 10px;}
			/*.banner2 .img img:nth-child(1){margin-right: 10px;}
			.banner2 .img img:nth-child(2){margin-left: 10px;}*/
			.main{width: 100%;background: #f1f1f1;padding-top:10px;}
			.main ul{display: flex;flex-wrap: wrap;width: 1264px;margin: 0 auto;justify-content: space-between;}
			.main li{width:300px;padding: 10px;background: white;box-sizing: border-box;margin-bottom: 10px;}
			/*.main li:nth-child(2n-1){margin-right: 20px;}*/
			.main li img{width: 100%;}
			.main li p{width: 100%;border-bottom: 1px solid #f2f2f2;padding:8px 5px;}
			.main li p a{font-size: 12px;color:#444;display: block;line-height: 18px;height: 18px;}
			.data{height:24px;line-height: 33px;padding:0 6px;}
			.data .time{float:left;font-size:10px;color:#9e9e9e;}
			.data .logo{float:right;}
			.data .logo img{width:24px;height:12px;}
			}
		</style>
	</head>
	<body>
		<div class="boss">
			<div class="top">
				<ul>
					<li><span class="iconfont icon1">&#xe655;</span></li>
					<li><img src="imgs/未标题-1.jpg"/></li>
					<li>
						<a href="">文章</a><a href="">文章</a><a href="">文章</a><a href="">文章</a><a href="">文章</a><a href="">文章</a>
					</li>
					<li><span class="iconfont icon2">&#xe624;</span></li>
				</ul>
			</div>
			<div class="banner">
			</div>
			<div class="tell">
				<ul>
					<li>[03-22]用户正式上线</li>
					<li>[03-22]用户正式上线</li>
					<li>[03-22]用户正式上线</li>
				</ul>
			</div>
			<div class="banner2">
				<img src="imgs/12215358876b9b48232955f.jpg" class="img1"/>
				<img src="imgs/2.png" class="img2"/>
				<img src="imgs/1.png" class="img3"/>
			</div>
			<div class="main">
				<ul>
					<li>
						<img src="imgs/17152701766befafc116905.png"/>
					<p><a href="">SEO智能自动化工具探索</a></p>
					<div class="data">
						<time class="time">2019-04-23</time>
						<div class="logo"><img src="imgs/未标题-1_03.jpg"/><img src="imgs/未标题-1_05.jpg"/></div>
					</div>
					</li>
					<li>
						<img src="imgs/17152701766befafc116905.png"/>
					<p><a href="">SEO智能自动化工具探索</a></p>
					<div class="data">
						<time class="time">2019-04-23</time>
						<div class="logo"><img src="imgs/未标题-1_03.jpg"/><img src="imgs/未标题-1_05.jpg"/></div>
					</div>
					</li>
					<li>
						<img src="imgs/17152701766befafc116905.png"/>
					<p><a href="">SEO智能自动化工具探索</a></p>
					<div class="data">
						<time class="time">2019-04-23</time>
						<div class="logo"><img src="imgs/未标题-1_03.jpg"/><img src="imgs/未标题-1_05.jpg"/></div>
					</div>
					</li>
					<li>
						<img src="imgs/17152701766befafc116905.png"/>
					<p><a href="">SEO智能自动化工具探索</a></p>
					<div class="data">
						<time class="time">2019-04-23</time>
						<div class="logo"><img src="imgs/未标题-1_03.jpg"/><img src="imgs/未标题-1_05.jpg"/></div>
					</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
